<template>
	<view>
		<view class="header" :style="{'height':statusBarHeight+'px'}">
			<view class="navon" :style="{'height':statusBarHeight+'px','padding-top':(statusBarHeight1)+'px'}">
				<view class="search-input" :style="{'height':(titleBarHeight)+'px'}" >
					<view class="city" @click="goLocation">
						<view class="text-cut-one">
							{{cname}}
						</view>
						<i class="iconfont">&#xe664</i>
					</view>
					<view class="input" @click="goSearch">
						<input type="text" v-model="searchValue" placeholder="搜索达人/动态/活动" disabled />
						<i class="iconfont" style="padding-right: 20rpx;">&#xe60a</i>
					</view>
				</view>
			</view>
		</view>
		
		<view class="main">
			<view class="banner" style="border: 1px solid green;">
				<swiper class="swiper" circular autoplay="true" @change="swiperchange">
					<swiper-item v-for="item,index in bannerList" :key="index" @click="bannerPageTo(item.url)">
						<image :src="rq.imgUrl(item.image)" mode="scaleToFill" class="syimg1" ></image>
					</swiper-item>
				</swiper>
				<view class="swiper_dot" v-if="bannerList.length">
					<view class="dot" :class="currentSwiper==l?'active':''" v-for="i,l in bannerList.length" :key="l"></view>
				</view>
				<carousel class="swiper_box" ></carousel>
			</view>
			
			<view class="bg-item">
				<image :src="rq.imgUrl(button1.image)" mode="scaleToFill" class="bg-image"
					@click="goPage('activity/activity')"></image>
				<view class="bg-item1">
					<image :src="rq.imgUrl(button2.image)" mode="scaleToFill" class="bg-image1"
						@click="goPage('ranking/ranking')"></image>
					<image :src="rq.imgUrl(button3.image)" mode="scaleToFill" class="bg-image1"
						@click="goPage('settled/settled')"></image>
				</view>

			</view>
			<view>
				<view class="tab flex_lr">
					<u-tabs @click="click" :list="tablist" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
				            color: '#303133',
				            fontWeight: 'bold',
				            transform: 'scale(1.1)'
				        }" :inactiveStyle="{
				            color: '#606266',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 10px; padding-right: 10px; height: 34px;">
					</u-tabs>
					<view class="flex_row nav_box">
						<view @click="sexlist(0)" :style="params.gender == 0?'background-color: #FF7681;':''"
							class="nav1 flex_center">
							<image style="width: 20rpx;height: 20rpx;" :src="rq.imgUrl('/static/svg/sexWoman.svg')"></image>
						</view>
						<view @click="sexlist(1)" :style="params.gender == 1?'background-color: #2BC1F1;':''"
							class="nav1 flex_center">
							<image style="width: 20rpx;height: 20rpx;" :src="rq.imgUrl('/static/svg/sexMan.svg')"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="but_box">
				<view class="bubble y_center" v-if="isShow">隐 身 达 人 在 这 里</view>
				<view class="to-btn" @click="goPage('dispatch/dispatch')">
					<image src="https://pw.qyang.cc/static/svg/button.svg" style="width: 46rpx;height: 46rpx;"></image>
				</view>
			</view>
			<view class="content">
				<view class="list" v-for="(item,index) in userList" :key="index" @click="goDetail(item)">
					<view class="list-image">
						<image :src="item.breviary_image" mode="aspectFill" class="image"></image>
						<image class="play" v-if="item.video_files&&item.video_files.length>0" src="https://pw.qyang.cc/static/index_play.png"></image>
						<view class="images">
							<image :src="i" v-for="i,a in item.images.slice(0,3)" mode="aspectFill" :key="a"></image>
						</view>
						<view class="tabs">
							<view class="tabs-item" v-for="(i,b) in item.tags" :key="b" v-if="b<3" :style="{background:i.color}">
								{{i.name}}
							</view>
						</view>
						<view class="juli-btn">
							<view class="juli">
								<view
									style="background: #00BC56;width: 10rpx;height: 10rpx;border-radius: 50%;margin-right: 10rpx;">
								</view>{{item.distance>1000?'>1000':item.distance}}km
							</view>
							<view class="btn">
								<image src="https://pw.qyang.cc/static/svg/button.svg"
									style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"></image> 邀约
							</view>
						</view>
					</view>
					<view class="list-con">
						<view class="left">
							<view class="l1"> {{item.nickname}}
								<image src="https://pw.qyang.cc/static/svg/icon-realname.svg"
									style="width: 30rpx;height: 30rpx;margin: 0 20rpx;" v-if="item.is_real == 1">
								</image>
								<view class="l1-sex1" v-if="item.gender == 1">
									<image src="https://pw.qyang.cc/static/sexW.png"
										style="width: 20rpx;height: 20rpx;margin-right: 10rpx;"></image>
										<span v-if="item.age">{{item.age}}</span>
								</view>
								<view class="l1-sex2" v-if="item.gender == 0">
									<image src="https://pw.qyang.cc/static/sexM.png"
										style="width: 20rpx;height: 20rpx; margin-right: 10rpx;"></image>
										<span v-if="item.age">{{item.age}}</span>
								</view>
							</view>
							<view v-if="item.ptpj" class="l2">
								<span
									style="font-size: 14px;color: #FF6C91;letter-spacing: 0px;margin-right: 10rpx;">Miss:</span>{{item.ptpj}}
							</view>
							<view v-else class="l2">{{item.bio}}</view>
							<view class="l3">
								<span v-if="item.cm">{{item.cm}}cm</span>
								<span v-if="item.kg">{{item.kg}}kg</span>
								<span v-if="item.occupation">{{item.occupation}}</span>
							</view>
						</view>
						<view class="right">
							<view class="r1"> {{item.grade}}</view>
							<view class="r2" v-if="item.rank"> 排名 <span style="color: #FF7681;margin-left: 10rpx;">{{item.rank}}</span>
							</view>
						</view>
					</view>
					<!-- <view v-for="(image,index1) in item.imageList" :key="index1">
						<image v-if="index1 === 0" :src="image.src" class="big-image"></image>
						<image v-else :src="image.src" class="small-image"></image>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 用户提示 -->
		<u-popup :show="isUserTip" closeOnClickOverlay mode="center" round="10" :safeAreaInsetBottom="false">
			<view class="user_tip">
				<image style="width: 526rpx;height: 644rpx;" :src="rq.imgUrl(userTips?userTips.image:'')" mode="aspectFill"></image>
				<view class="know" @click="clickUserTip">我知道了</view>
			</view>
		</u-popup>
		<!-- 红包 -->
		<u-overlay :show="isHongbao" v-if="isHongbao && hongbaoList">
			<view class="hongbao">
				<view class="juan" @click="lingHB(true)">
					<view class="juan2">
						<view class="price" v-if="hongbaoList.length>0&&hongbaoList[0].type=='FULL'">
							<span
								style="font-weight: 600;font-size: 13px;">￥</span>{{hongbaoList.length>0?Number(hongbaoList[0].money):''}}
						</view>
						<view class="price" v-else-if="hongbaoList.length>0&&hongbaoList[0].type=='DISCOUNT'">
							{{hongbaoList.length>0?Number(hongbaoList[0].discount):''}}<span
								style="font-weight: 600;font-size: 13px;">%</span>
						</view>
						<view class="text">
							新人专属优惠券
							<br>满{{hongbaoList.length>0?hongbaoList[0].min_money:''}}可用
						</view>
					</view>
					<view class="juan1"></view>
				</view>
				<image class="image" :src="rq.imgUrl(hongbaoList[0].cover)?rq.imgUrl(hongbaoList[0].cover):'https://pw.qyang.cc/static/defult_hongbao.png'" mode="aspectFit" @click="lingHB(true)"></image>
				<!-- <image class="image2" src="https://pw.qyang.cc/static/hongbao-btn.png" mode="aspectFit"
					@click="lingHB(true)">
				</image> -->
				<image class="image1" src="https://pw.qyang.cc/static/hongbao-del.png" mode="aspectFit" @click="lingHB(false)">
				</image>
			</view>
		</u-overlay>
		<view class="bottom-tabbar">
			<tabbar :currentPage="0" />
		</view>
	</view>
</template>

<script>
	import carousel from '../../components/carousel/carousel_list.vue';
	export default {
		components: {
			carousel
		},
		data() {
			return {
				statusBarHeight: 0,
				statusBarHeight1: 0,
				titleBarHeight: 35,
				isUserTip: false,
				isHongbao: false,
				bannerList: [],
				banList: [],
				searchValue:'',
				tablist: [{
						id: 0,
						name: "默认",
					},
					{
						id: 1,
						name: "距离",
					},
					{
						id: 2,
						name: "人气",
					},
					{
						id: 3,
						name: "评分",
					},
					{
						id: 4,
						name: "最新",
					},
				],
				userList: [],
				cname: "",
				button1: "",
				button2: "",
				button3: "",
				params: {
					page: 1,
					gender: 0
				},
				hongbaoList: [],
				isShow: true,
				currentSwiper:0,
				coupnLoading:false,
				userTips:{}
			}
		},
		onLoad() {
			if(getApp().globalData.token){
				this.rq.getData('index/getImage',{c_id:9}).then(res=>{
					this.userTips = res.data[0]
					this.isUserTip = res.data[0]&&res.data[0].status == 1?true:false
				})
				const userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				if(userInfo.group_id==3){
					if(!uni.getStorageSync('isAgent')){
						uni.showToast({
							title:'您已经成为城市代理人',
							icon:'none'
						})
						uni.setStorageSync('isAgent',true)
					}
				}
			}
			uni.getSystemInfo({
				success: (res) => {
					// #ifdef MP-WEIXIN
						this.statusBarHeight1 = uni.getMenuButtonBoundingClientRect().top;
						this.titleBarHeight = uni.getMenuButtonBoundingClientRect().height;
						this.statusBarHeight = this.titleBarHeight + this.statusBarHeight1;
					// #endif	
					// #ifndef MP-WEIXIN
						this.statusBarHeight = res.statusBarHeight * 1 + 46;
						this.statusBarHeight1 = res.statusBarHeight;
					// #endif
					
				},
			});
		},
		onPullDownRefresh() {
			this.params.page = 1;
			uni.hideNavigationBarLoading();
			this.getList()
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			if (this.userList.length < this.total) {
				this.getList(true)
				this.page++;
			}
		},
		onShow() {
			this.rq.getData('index/index', {}).then(({
				data
			}) => {
				this.bannerList = data.banner
				this.button1 = data.button1
				this.button2 = data.button2
				this.button3 = data.button3
			})
			
			// this.rq.getData('daren/order_index', {}).then(res => {
			// 	if (res.code == 1) {
			// 		this.banList = res.data
			// 	}
			// })
			
			setTimeout(() => {
				this.isShow = false
			}, 5 * 1000)
			if (uni.getStorageSync('dw')) {
				this.cname = uni.getStorageSync('dw').shortname
				this.params.city_id = uni.getStorageSync('dw').id
				this.params.lat = uni.getStorageSync('dw').lat
				this.params.lng = uni.getStorageSync('dw').lng
				if(getApp().globalData.token){
					this.getList()
					this.getCoupn()
				}
			} else {
				var that = this
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: r => {
						uni.setStorageSync("dingwei", {
							lat: r.latitude,
							lng: r.longitude
						})
						that.rq.getData('area/getLocation', {
							longitude: r.longitude,
							latitude: r.latitude
						}).then(res => {
							if (res.code == 1) {
								var dw = {
									id: res.data.id,
									shortname: res.data.name,
									lat: r.latitude,
									lng: r.longitude
								}
								uni.setStorageSync('dw', dw)
								that.cname = res.data.name
								this.params.city_id = res.data.id
								this.params.lat = r.latitude
								this.params.lng = r.longitude
								if(getApp().globalData.token){
									this.getList()
									this.getCoupn()
								}
							}
						})
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {}
				});
			}
		},
		methods: {
			bannerPageTo(url){
				if(!url)return;
				if (!url.startsWith("/")) {
				    url='/'+url;
				}
				uni.navigateTo({
					url:url
				})
			},
			getCoupn() {
				if(this.coupnLoading) return
				this.coupnLoading = true
				this.rq.getData('Market/getCoupons', {
					city_id: this.params.city_id
				}).then(res => {
					this.coupnLoading = false
					console.log('优惠券',res.data)
					console.log('优惠券',this.params.city_id)
					if (res.data.length > 0) {
						this.isHongbao = this.isUserTip?false:true
						this.hongbaoList = res.data
					}
				}).catch(err=>{
					this.coupnLoading = false
				}).finally(()=>{
					this.coupnLoading = false
				})
			},
			swiperchange(e){
				this.currentSwiper = e.detail.current
			},
			goLocation() {
				uni.navigateTo({
					url: "/subpages/location/location",
				});
			},
			goSearch() {
				uni.navigateTo({
					url: "/subpages/search/search",
				});
			},
			goPage(url) {
				if(url=='settled/settled'){
					const userInfo = JSON.parse(uni.getStorageSync('userInfo'))
					if(userInfo.group_id==3){
						uni.showToast({
							title:'您已经成为城市代理人，不可入驻达人~',
							icon:'none'
						})
						return
					}
				}
				uni.navigateTo({
					url: `/subpages/${url}`,
				});
			},
			getList(more) {
				this.rq.getData('Expert/index', {
					city_id: this.params.city_id,
					page: this.params.page,
					limit: 10,
					lng: this.params.lng,
					lat: this.params.lat,
					type: this.params.type,
					gender: this.params.gender,
					name: this.params.name ? this.params.name : ''
				}).then(({
					data
				}) => {
					if (more) {
						this.userList = [...this.userList, ...data.data]
					} else {
						this.userList = data.data
					}
					console.log(this.userList)
					this.total = data.total
					uni.stopPullDownRefresh()
				}).catch(() => {
					uni.stopPullDownRefresh()
				})
			},
			goDetail(item) {
				console.log(item)
				uni.navigateTo({
					url: "/subpages/talent/talent?id=" + item.id,
				});
			},
			// 领红包
			lingHB(tip) {
				this.isHongbao = false;
				this.rq.getData('Market/takeCoupon', {
					id: this.hongbaoList[0].id
				}).then(res => {
					if (tip) {
						uni.showToast({
							title: "领取红包成功",
							icon: "none",
							duration: 2000,
						});
					}
				}).finally(() => {
					this.isHongbao = false;
				})
			},
			// 关闭用户提示，打开红包弹框
			clickUserTip() {
				this.isUserTip = false;
				if(this.hongbaoList.length>0){
					this.isHongbao = true;
				}
			},
			// 切换首页tab
			click(item) {
				this.params.type = item.id
				this.params.page = 1
				this.getList()
			},
			// 性别筛选
			sexlist(e) {
				console.log(this.params.gender)
				this.params.gender = e
				this.getList()
			}
		},
	};
</script>

<style lang="scss" scoped>
	.bottom-tabbar {
		position: fixed;
		bottom: 0;
	}
	.banner{
		position: relative;
		z-index: 1;
		.swiper_dot{
			position: absolute;
			bottom: 60rpx;
			width: 100%;			
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1;
			.dot{
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				margin: 0 8rpx;
				box-sizing: border-box;
				border:2rpx solid rgb(213, 213, 213);
				background: #ffffff40;				
				
				&.active{
					border:2rpx solid #00BC56;
					background: #fff;
				}
			}
		}
	}
	.hongbao {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;

		.juan {
			position: absolute;
			z-index: 1;
			// margin-bottom: 50rpx;

			.juan1 {
				width: 380rpx;
				height: 200rpx;
				margin-bottom: 50rpx;
			}

			.juan2 {
				display: flex;
				align-items: center;
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 26px;
				font-weight: 800;
				line-height: 52px;
				letter-spacing: 0px;
				color: #FF204A;
				z-index: auto;
				position: absolute;
				margin-top: 40rpx;
				width: 380rpx;
				height: 100rpx;

				.text {
					font-size: 11px;
					font-weight: normal;
					line-height: 15px;
					letter-spacing: 0px;
					color: #FF204A;
					padding-left: 25rpx;
				}

				.price {
					font-weight: 800;
					font-size: 26px;
					// margin-right: 60rpx;
					// margin-left: 30rpx;
					// padding-left: 10rpx;
					width: 120rpx;
					text-align: center;
				}
			}
		}

		.image {
			position: relative;
			width: 650rpx;
			height: 700rpx;
		}

		.image2 {
			position: absolute;
			width: 500rpx;
			height: 80rpx;
			margin-top: 470rpx;
			z-index: 1;
		}

		.image1 {
			width: 100rpx;
			height: 60rpx;
		}
	}

	.main {
		width: 100%;
		height: 100%;
		position: relative;


		.content {
			padding: 20rpx 30rpx 100rpx 30rpx;

			.list {
				margin-bottom: 30rpx;
				border-radius: 10px;
				background-color: #ffffff;
				width: 100%;
				height: 600rpx;
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				align-items: flex-start;
				// justify-content: space-between;

				.list-image {
					object-fit: cover;
					width: 100%;
					border-radius: 10px;
					height: 65%;
					display: flex;
					position: relative;
					.play{
						width: 32rpx;
						height: 36rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(calc(-50% - 92rpx),-50%);
					}
					.images {
						display: flex;
						flex-direction: column;
						margin-left: 4rpx;

						image {
							width: 184rpx;
							height: 158rpx;
							margin-bottom: 4rpx;

							&:first-child {
								border-top-right-radius: 10px;
							}

							&:last-child {
								margin-bottom: 0;
							}
						}
					}


					.image {
						// position: absolute;
						// width: 100%;
						border-top-left-radius: 10px;
						border-bottom-left-radius: 10px;
						height: 100%;
					}

					.tabs {
						display: flex;
						position: absolute;
						margin-top: 20rpx;
						margin-left: 20rpx;

						.tabs-item {
							font-family: PingFang SC;
							font-size: 12px;
							font-weight: normal;
							line-height: 18px;
							display: flex;
							align-items: center;
							justify-content: center;
							letter-spacing: 0px;
							color: #FFFFFF;
							// width: 59px;
							padding: 0 10rpx;
							height: 22px;
							border-radius: 20px;
							opacity: 1;
							background: #FF6C91;
							margin-right: 10rpx;

						}
					}

					.juli-btn {
						position: absolute;
						left: 0;
						right: 0;
						bottom: 11rpx;
					}

					.juli {
						height: 17px;
						opacity: 1;
						background: rgba(255, 255, 255, 0.86);
						font-family: 阿里巴巴普惠体 2.0;
						font-size: 13px;
						font-weight: normal;
						line-height: 6px;
						letter-spacing: 0px;
						color: #00BC56;
						display: inline-flex;
						border-radius: 20px;
						padding: 0 5px;
						align-items: center;
						justify-content: center;
						position: relative;
						margin-left: 20rpx;
					}

					.btn {
						right: 230rpx;
						position: absolute;
						width: 115px;
						height: 38px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 99px;
						opacity: 1;
						margin-top: -31rpx;
						background: #FF7681;
						font-family: PingFang SC;
						font-size: 18px;
						font-weight: normal;
						line-height: 18px;
						letter-spacing: 0px;

						color: #FFFFFF;

						text-shadow: 0px 1px 4px rgba(108, 37, 37, 0.25);
					}
				}


				.list-con {
					display: flex;
					height: 35%;
					width: 100%;

					.left {
						margin-top: 35rpx;
						margin-left: 10rpx;
						padding: 20rpx;
						flex: 1;
						width: 500rpx;

						.l1 {
							font-family: PingFang SC;
							font-size: 18px;
							font-weight: 600;
							line-height: 18px;
							letter-spacing: 1px;
							color: #272B2D;
							display: flex;
							margin-bottom: 10rpx;

							.l1-sex1 {
								display: flex;
								width: 42px;
								height: 16px;
								border-radius: 88px;
								opacity: 1;
								background: rgba(116, 220, 254, 0.2);

								font-size: 11px;
								font-weight: 500;
								line-height: 15px;
								display: flex;
								align-items: center;
								justify-content: center;
								letter-spacing: 0px;
								color: #2BC1F1;

							}

							.l1-sex2 {
								display: flex;
								width: 42px;
								height: 16px;
								border-radius: 88px;
								opacity: 1;

								background: rgba(253, 168, 175, 0.2);

								font-size: 11px;
								font-weight: 500;
								line-height: 15px;
								display: flex;
								align-items: center;
								justify-content: center;
								letter-spacing: 0px;
								color: #FDA8AF;

							}
						}

						.l2 {
							font-family: PingFang SC;
							font-size: 11px;
							font-weight: normal;
							line-height: 19px;
							letter-spacing: 1px;
							color: #000000;
							margin-bottom: 10rpx;
							overflow: hidden;
							/* 超出元素宽度的内容隐藏起来 */
							text-overflow: ellipsis;
							/* 当文本溢出时显示省略号 */
							white-space: nowrap;
						}

						.l3 {
							font-family: PingFang SC;
							font-size: 12px;
							font-weight: normal;
							line-height: 12px;
							letter-spacing: 0px;

							color: #999999;
							margin-bottom: 10rpx;
							span{
								margin-right: 15rpx;
							}
						}
					}

					.right {
						margin-top: 35rpx;
						padding: 20rpx;
						margin-right: 10rpx;

						.r1 {
							font-family: PingFang SC;
							font-size: 30px;
							font-weight: normal;
							line-height: 18px;
							letter-spacing: 0px;
							margin-bottom: 20rpx;

							color: #FF5866;

						}

						.r2 {
							font-family: PingFang SC;
							font-size: 12px;
							font-weight: normal;
							line-height: 12px;
							text-align: right;
							letter-spacing: 0px;

							color: #333333
						}

					}
				}


				.big-image {
					width: 60%;
					height: 100%;
					border-radius: 10px;
					object-fit: cover; // 让图片按比例填充元素，可能会裁剪图片以保持宽高比
					display: block;
					/* 确保图片显示为块级元素，一般是需要的 */
					visibility: visible;
					/* 确保图片是可见的，而不是设置为了hidden等不可见状态 */
				}

				.small-image {
					width: 35%;
					height: 90rpx; // 根据实际情况调整小图高度，保证整体布局美观
					border-radius: 10px;
					object-fit: cover;
					margin-bottom: 10rpx; // 小图之间添加一定间距，可根据需求调整
					display: block;
					visibility: visible;
				}
			}


		}

		.tab {
			// margin-top: 100rpx;
			padding-left: 15rpx;
			position: relative;
		}

		.scroll-item {
			width: 129px;
			height: 24px;
			border-radius: 22px;
			opacity: 1;

			background: linear-gradient(90deg, rgba(248, 170, 157, 0.6) 0%, rgba(248, 133, 152, 0.6) 100%);
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 12px;
			font-weight: 500;
			line-height: 12px;
			letter-spacing: 0px;

			color: #333333;
			position: absolute;
			z-index: 1;
			margin-top: -130rpx;
			margin-left: 20rpx;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
		}

		.but_box {
			position: fixed;
			z-index: 999;
			bottom: 10vh;
			right: 40rpx;
			view{
				position: relative;
				z-index: 999;
			}
		}

		.to-btn {
			width: 50px;
			height: 50px;
			border-radius: 25px;
			opacity: 1;
			background: #FF7681;
			box-shadow: 0px 2px 4px 1px rgba(152, 95, 91, 0.19);
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 12px;
			font-weight: normal;
			line-height: 12px;
			letter-spacing: 0px;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		.bg-item {
			position: relative;
			left: 0px;
			top: -50rpx;
			width: 100%;
			
			// height: 142rpx;
			opacity: 1;
			background: url('https://pw.qyang.cc/static/index_bg.png') no-repeat center top;
			display: flex;
			background-size: 100% 142rpx;
			justify-content: center;
			align-items: center;
			padding-top: 60rpx;
			z-index: 1;

			.bg-item1 {
				display: flex;
				flex-direction: column;
				// margin-top: 180rpx;

				.bg-image1 {
					width: 350rpx;
					height: 70px;
					border-radius: 10px;
				}
			}

			.bg-image {
				// margin-top: 180rpx;
				height: 140px;
				width: 370rpx;
				display: block;
				z-index: 0;
				border-radius: 10px;
				margin-left: -15rpx;
			}

			.top-left-area {
				position: absolute;
				top: 0;
				left: 0;
				width: 50%;
				height: 50%;
			}

			.top-right-area {
				position: absolute;
				top: 0;
				right: 0;
				width: 50%;
				height: 50%;
			}

			.bottom-left-area {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 50%;
				height: 50%;
			}

			.bottom-right-area {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 50%;
				height: 50%;
			}
		}
	}

	.swiper {
		height: 500rpx;

		.syimg1 {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}

	.header {
		width: 100%;
		// height: auto;
		// display: table;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 10000;
		// background: linear-gradient(to right, #82ECE5, #1AAC9D);
		.navon {
			width: 100%;

			box-sizing: border-box;
			font-weight: 500;
			font-size: 36rpx;

			.search-input {

				margin-left: 15px;
				width: 65.6%;
				border-radius: 50px;
				opacity: 1;
				background: rgba(255, 255, 255, 0.87);
				box-sizing: border-box;
				border: 1px solid #333333;
				display: flex;
				font-size: 30rpx;

			}

			.city {
				display: flex;
				width: 150rpx;
				align-items: center;
				justify-content: center;
				padding-left: 10rpx;

			}

			.text-cut-one {
				flex: 1;
				text-overflow: ellipsis;
				white-space: normal;
				overflow: hidden;
				text-align: center;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.input {
				display: flex;
				align-items: center;
				justify-content: center;

				input {
					border-left: 1px solid gray;
					padding-left: 10rpx;
					color: gray;
				}
			}
		}

	}

	.tab::v-deep .u-tabs__wrapper__nav__line {

		// position: relative;
		&::after {
			content: '';
			width: 32rpx;
			height: 16rpx;
			position: absolute;
			border-radius: 44rpx;
			left: 50%;
			top: -30rpx;
			transform: translateX(-50%);
			opacity: 1;
			background: rgba(255, 138, 148, 0.61);
			filter: blur(8rpx);
		}
	}

	.swiper_box {
		// top: 250rpx;
		left: 30rpx;
		position: absolute;
		z-index: 9;
		margin-top: 0rpx;
		height: 200rpx;
		bottom: 70rpx;
		// border: 1px solid red;
		// animation: fadeUp 3s infinite;
		
	}

	// @keyframes fadeUp {
	// 	0% {
	// 		margin-top: -200rpx;
	// 		opacity: 0;
	// 	}

	// 	20% {
	// 		margin-top: -200rpx;
	// 		opacity: 0;
	// 	}

	// 	50% {
	// 		margin-top: -260rpx;
	// 		opacity: .8;
	// 	}

	// 	100% {
	// 		margin-top: -300rpx;
	// 		opacity: 1;
	// 	}
	// }

	.nav_box {
		width: 120rpx;
		background-color: #333333;
		border-radius: 50rpx;
		height: 50rpx;
		margin-right: 40rpx;
		
		.nav1 {
			width: 50%;
			height: 50rpx;
			border-radius: 50rpx;
			color: #FFF;
		}
	}

	.bubble {
		position: relative;
		// top: -8vh;
		right: -10rpx;
		width: 30rpx;
		padding: 40rpx;
		background-color: rgba(0, 0, 0, 0.8);

		border-radius: 15px;
		// box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		font-family: Arial, sans-serif;
		font-size: 26rpx;
		color: #ffffff;
		animation: fadeOut 5s forwards;
		z-index: 9;
	}

	@keyframes fadeOut {
		to {
			opacity: 0; // 完全透明，实现淡出效果
			visibility: hidden; // 可选，确保元素在视觉上不可见
		}
	}

	.bubble::after {
		z-index: 1;
		content: '';
		position: absolute;
		bottom: -7px;
		left: 20px;
		width: 0;
		height: 0;
		border-left: -1px solid transparent;
		border-right: 8px solid transparent;
		border-top: 13px solid rgba(0, 0, 0, 0.5);
		animation: fadeOut 5s forwards;
	}
	
	.user_tip{
		// safeAreaInsetBottom
		border-radius: 10px;
		overflow: hidden;
		.know{
			height: 102rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #3D3D3D;
		}
	}
</style>